/* Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *      
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License
 */
 
// text for the button
var newHair = document.createTextNode(
    'I\'d like a new haircut');
var oldHair = document.createTextNode(
    'I want my haircut back!');

// button that switches the hair overlay visibility
var overlayButton;
// hair overlay
var hairOverlay;

// inits the app
function initOverlays() {
  try {
    addOverlayButton();
    createOverlays();
    overlayButton.click(switchHair);
  } catch (e) {
    console.log(e.stack);
  }
}

// creates the face tracking and statics overlays
function createOverlays() {
  var hair = gapi.hangout.av.effects.createImageResource(
      'http://theloraxuniversal.appspot.com/static/hair.png');
  hair.onLoad.add( function(event) {
    if ( !event.isLoaded ) {
      console.log("Could not load your image");
    } else {
      console.log(overlayButton);
      overlayButton.removeAttr("disabled");
    }
  });
  hairOverlay = hair.createFaceTrackingOverlay({
    'trackingFeature':
        gapi.hangout.av.effects.FaceTrackingFeature.NOSE_ROOT,
    'scaleWithFace': true,
    'rotateWithFace': true,
    'scale': 1.5,
    'offset': {'x': 0, 'y': -0.3},
  });
  
  var localParticipant = gapi.hangout.getLocalParticipant();

  var nameImage = gapi.hangout.av.effects.createImageResource(
      createTextOverlay(localParticipant.person.displayName));
  var nameOverlay = nameImage.createOverlay({
    'scale': {
      'magnitude': 0.5,
      'reference': gapi.hangout.av.effects.ScaleReference.WIDTH
    }
  });
  // Put the text x-centered and near the bottom of the frame
  nameOverlay.setPosition(0, 0.45);
  nameOverlay.setVisible(true);
  
  var profileImage = gapi.hangout.av.effects.createImageResource(
      localParticipant.person.image.url);
  var profileOverlay = profileImage.createOverlay({
    'scale': {
      'magnitude': 0.1,
      'reference': gapi.hangout.av.effects.ScaleReference.WIDTH
    },
    'position': {'x': -0.40, 'y': -0.40 }
  });
  profileOverlay.setVisible(true);
  
}

// adds to the dom the button to switch the visibility of the hair overlay
function addOverlayButton() {
  overlayButton = $('<button id="overlayButton" disabled="disabled"></button>');
  overlayButton.append(newHair);
  $('body').append(overlayButton);
}

// performs the operations needed for the visibility switch of the hair overlay
function switchHair(event) {
  console.log('switch');
  overlayButton.html('');
  var visible = hairOverlay.isVisible();
  var eventFeel = visible ? 'back to old' : 'switch to new';
  if(visible) {
    hairOverlay.setVisible(false);
    overlayButton.append(newHair);
  } else {
    console.log(hairOverlay);
    hairOverlay.setVisible(true);
    overlayButton.append(oldHair);
  }
  _gaq.push(['_trackEvent', 'change hair', eventFeel]);
}

// creates a canvas for the text overlay
function createTextOverlay(string) {
  // Create a canvas to draw on
  var canvas = document.createElement('canvas');
  canvas.setAttribute('width', 166);
  canvas.setAttribute('height', 100);
  
  var context = canvas.getContext('2d');

  // Draw background
  context.fillStyle = '#BBB';
  context.fillRect(0,0,166,50);

  // Draw text
  context.font = '18pt Impact';
  context.lineWidth = 6;
  context.lineStyle = '#000';
  context.fillStyle = '#FFF';
  context.fillColor = '#ffff00';
  context.textAlign = 'center';
  context.textBaseline = 'bottom';
  context.strokeText(string, canvas.width / 2, canvas.height / 2);
  context.fillText(string, canvas.width / 2, canvas.height / 2);

  return canvas.toDataURL();
}
